<template>
  <!-- 多图上传 -->
  <el-dialog
    title="多图上传"
    class="dialogInsertImage"
    :visible.sync="dialogVisible"
    :append-to-body="true"
    :before-close="handleClose"
  >
    <el-upload
      ref="uploadBox"
      :action="GLOBAL.$image"
      list-type="picture-card"
      :http-request="uploadImage"
      drag
      :multiple="true"
      :before-upload="beforeAvatarUpload"
    >
      <div slot="file" slot-scope="{ file }">
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
        <span
          class="el-upload-list__item-actions"
          :class="{ isLoading: file.status != 'success' }"
        >
          <span class="el-upload-list__item-delete" @click="handleRemove(file)">
            <!-- TODO 已上传样式待优化 -->
            <span v-show="file.status == 'success'">已上传</span>
            <span v-show="file.status != 'success'">上传中</span>
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>

      <span>拖入图片或点击</span>
    </el-upload>

    <span slot="footer" class="dialog-footer">
      <el-checkbox v-model="isHD" style="padding-right: 10px"
        >高清(此选项在上传前选择有效)</el-checkbox
      >
      <el-button @click="$emit('closeDialog')">取 消</el-button>
      <el-button type="primary" @click="insertImage">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import imgzip from "imgzip";
// import pluginReq from '@api/plugin.upload'
import { uploadImage } from "@/api/article";
export default {
  name: "froala-insertImages",
  props: ["dialogVisible"],
  data() {
    return {
      fileList: [],
      isHD: false,
    };
  },
  methods: {
    handleClose() {
      this.$emit("closeDialog");
    },

    handleRemove(file) {
      let i = this.$refs.uploadBox.uploadFiles.findIndex(
        (it) => it.uid == file.uid
      );
      this.$refs.uploadBox.uploadFiles.splice(i, 1);
    },

    uploadImage(blob) {
      imgzip.photoCompress(blob.file, { quality: 0.1 }, (base64) => {
        let blod = imgzip.convertBase64UrlToBlob(base64);
        let data = new FormData();
        data.set("image", blob.file);
        data.set("type", 0);
        uploadImage(data)
          .then((res) => {
            let url = this.GLOBAL.$image + res.data.imageUrl;
            if (!this.isHD) url += "?imageView2/2/w/500";
            blob.onSuccess({ url });
          })
          .catch((res) => {
            this.$message("上传失败");
          });
      });
    },

    beforeAvatarUpload(file) {
      const isImg = file.type === "image/jpeg" || file.type === "image/png";
      const isLt8M = file.size / 1024 / 1024 < 10;

      if (!isImg) {
        this.$message.error("请上传图片!");
      }
      if (!isLt8M) {
        this.$message.error("上传图片大小不能超过 10MB!");
      }
      return isImg && isLt8M && 0;
    },

    insertImage() {
      let list = this.$refs.uploadBox.uploadFiles
        .filter((it) => it.response?.url)
        .map(
          (it) =>
            `<section><img src="${it.response.url}" style="max-width: 100%;" class="fr-fic fr-dib fr-draggable"></section>`
        );
      this.$emit("closeDialog");
      this.$emit("insertImage", list.join(""));
      this.$refs.uploadBox.uploadFiles = [];
    },
  },
};
</script>

<style lang="scss" scoped>
.dialogInsertImage ::v-deep .el-upload-dragger {
  width: auto;
  height: auto;
}
.el-upload-list__item-actions {
  &.isLoading {
    opacity: 1;
    span {
      display: inline-block;
    }
  }
}
</style>
